<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="参数名" style="width:300px"  clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="search" icon="el-icon-search">查询</el-button>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-button type="primary" @click="showAdd" icon="el-icon-plus">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="dataList" border highlight-current-row v-loading="listLoading"  @selection-change="selsChange" style="width: 100%;">
      <!--<el-table-column type="selection" width="55">-->
      <!--</el-table-column>-->
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="参数名" width="150" >
      </el-table-column>
      <el-table-column prop="value" label="参数值" min-width="600" >
      </el-table-column>

      <el-table-column prop="remark" label="备注" min-width="180" >
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="showEdit(scope.$index, scope.row)" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDel(scope.$index, scope.row)" icon="el-icon-delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :page-sizes="pageSizes"
                     :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>

    <!--新增/编辑共用界面-->
    <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false">
      <el-form :model="formData" label-width="80px" :rules="formRules" ref="formData">
        <el-form-item label="参数名" prop="name">
          <el-input v-model="formData.name" ></el-input>
        </el-form-item>
        <el-form-item label="参数值" prop="value">
          <el-input  v-model="formData.value"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input  v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="formVisible = false">取消</el-button>
        <el-button type="primary" @click.native="saveSubmit" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>

    export default {
        data() {
            return {
                filters: {
                    keyword: ''
                },

                listLoading: false, //是否显示加载动画
                submitLoading:false,

                dataList: [], //数据列表(用户)

                total: 0,
                pageIndex: 1, //页码
                pageSize:this.CONSTANT.PAGE_SIZE, //分页大小
                pageSizes:this.CONSTANT.PAGE_SIZES, //分页大小选择列表

                sels: [],//列表选中列

                action:'', // 'add'-添加，'edit'-编辑，'detail'-详情
                formVisible:false, //界面是否显示
                formTitle:'', //界面标题
                formRules: {
                    name: [
                        { required: true, message: '请输入参数名', trigger: 'blur' }
                    ],
                    value: [
                        { required: true, message: '请输入参数值', trigger: 'blur' }
                    ]
                },

                //新增/编辑界面数据
                formData: {
                    name: '',
                    value: '',
                    remark:''
                }

            }
        },
        methods: {
            selsChange: function (sels) { //保存复选框选中的记录
                this.sels = sels;
            },
            handleSizeChange(val) { //改变分页大小
                this.pageSize = val;
                this.getDataList();
            },
            handleCurrentChange(val) { //页码跳转
                this.pageIndex = val;
                this.getDataList();
            },
            search(){
                if(this.filters.keyword==''){
                    this.$message('请输入搜索内容');
                    return;
                }
                this.getDataList();
            },
            getDataList() { //获取数据列表（用户）
                this.listLoading = true;

                let para = {
                    pageIndex: this.pageIndex,
                    pageSize:this.pageSize,
                    keyword: this.filters.keyword
                };

                this.$http.post('/api/sysConfig/list/find', para).then(res => {

                    this.listLoading = false;

                    this.total = res.data.total;
                    this.dataList = res.data.data;

                }).catch((error) => {
                    this.listLoading = false;
                    if(error) console.log(error);
                });
            },
            handleDel: function (index, row) { //删除
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    let para = { id: row.id };
                    this.$http.get('/api/sysConfig/remove/'+para.id).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }else{
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                        this.getDataList();
                    });
                }).catch(() => {
                    if(error) console.log(error);
                });
            },
            showAdd: function () { //显示新增界面

                this.formVisible = true;
                this.formData = {
                    name: '',
                    value: '',
                    remark:''
                };

                this.action="add";
                this.formTitle='新增';
            },
            showEdit:function (index, row) { //显示编辑界面

                this.formVisible = true;
                this.formData = Object.assign({}, row);

                this.action="edit";
                this.formTitle='编辑';
            },
            saveSubmit: function () { //保存：新增/编辑

                let apiPath='';
                if(this.action=='add'){
                    apiPath='/api/sysConfig/add';
                }else{
                    apiPath='/api/sysConfig/modify';
                }

                this.$refs.formData.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.submitLoading = true;

                            let para = Object.assign({}, this.formData);

                            this.$http.post(apiPath, para).then(res => {
                                this.submitLoading = false;

                                if (res.data.code == 0) {
                                    this.$message({
                                        message: '提交成功',
                                        type: 'success'
                                    });
                                    this.$refs['formData'].resetFields();
                                    this.formVisible = false;
                                    this.getDataList(); //重新加载数据
                                }else{
                                    this.$message({
                                        message: '提交失败',
                                        type: 'error'
                                    });
                                }
                            }).catch((error) => {
                                this.submitLoading = true;
                                if(error) console.log(error);
                            });

                        });
                    }
                });
            },
        },
        mounted() {
            this.getDataList(); //进入页面就加载数据
        }
    }

</script>
